import { PlusOutlined, DownOutlined } from '@ant-design/icons';
import { Button, message, Divider, Popconfirm, Tree, Select, Row, Col, Spin } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { FormattedMessage } from 'umi';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import moment from 'moment';
import { getList, getTree, getSourcedataList } from './api';
import styles from './index.less';
import { map } from 'lodash';

const { Option } = Select;

// 主数据格式化
const setList = arr => {
  const newTreeData = [];
  arr.map(item => {
    // const obj = { ...item }
    const obj = {
      id: item.deptId,
      value: item.deptId,
      title: item.deptName,
      pId: item.parentId,
      // isLeaf: false
    };
    if (item.children && item.children.length) {
      obj.children = setList(item.children);
    } else {
      obj.children = null;
    }
    newTreeData.push(obj);
    return '';
  });
  return newTreeData;
};

const TableList = () => {
  const [loading, setLoading] = useState(false);
  const [categoryData, setCategoryData] = useState(false); //多选 删除

  const [selectedKeys, setSelectedKeys] = useState(); //当前选列表
  const [keyValue, setKeyValue] = useState(null);

  const [sourcedata, setSourcedata] = useState([]); /// 数据源数据
  const [sourcedataId, setSourcedataId] = useState(null); // 已选择数据源Id
  const [listData, setListData] = useState([]);

  console.log('listData', listData);
  /**
   * @zh-CN 列表数据
   * @param fields
   */

  const getListData = fields => {
    setLoading(true);

    // getList({ unitid: selectedKeys, ...fields }).then(res => {
    getList({ ...fields }).then(res => {
      setLoading(false);
      if (res.code === 0) {
        console.log(2222, res.data.dataunits);
        if (
          res.data &&
          res.data.dataunits &&
          res.data.dataunits.length &&
          res.data.dataunits[0].sources &&
          res.data.dataunits[0].sources.length
        ) {
          const arr = res.data.dataunits[0].sources[0];
          setListData(arr.targettables || []);
        } else {
          setListData([]);
        }
      } else {
        setListData([]);
        message.error(res.msg || '操作失败');
      }
      console.log(1111, res);
    });
  };

  // ----------------------------------------------结束------------------------------------------------------

  const getTreeData = () => {
    getTree().then(res => {
      if (res.code === 0) {
        setCategoryData(res.data);
        setKeyValue(res.data[0]?.key);
        setSelectedKeys([res.data[0]?.key]);
        const paylaod = {
          dataUnitId: res.data[0]?.key,
        };
        getSourcedata(paylaod);
      }
    });
  };

  /**
   * @zh-CN 获取数据源
   * @param value
   */
  const getSourcedata = value => {
    getSourcedataList(value).then(res => {
      if (res.code === 0) {
        setSourcedataId((res.data && res.data[0]?.id) || null);
        setSourcedata(res.data);
      } else {
        message.error(res.msg || '请求失败，请重试');
      }
    });
  };

  /**
   * @zh-CN 选择类别
   * @param value, data
   */

  const onSelect = (value, data) => {
    setSelectedKeys(value);
    setKeyValue(data.node.key);

    const paylaod = {
      dataUnitId: data.node.key,
    };
    getSourcedata(paylaod);
  };

  /**
   * @zh-CN 选择数据源
   * @param value
   */
  const selSourcedata = value => {
    setSourcedataId(value);
    getListData({ sourceid: '091cbdcaa9c1451f884310a777a162e4' });
  };

  useEffect(() => {
    getTreeData();
  }, []);

  return (
    <PageContainer>
      <div className={styles.wrap}>
        <div className={styles.left}>
          <Tree
            showLine
            switcherIcon={<DownOutlined />}
            onSelect={onSelect}
            treeData={categoryData}
            selectedKeys={selectedKeys}
          />
        </div>
        <div className={styles.right}>
          <div className={styles.selectBox}>
            {sourcedataId ? (
              <>
                数据源名称：
                <Select
                  style={{ width: 200, marginBottom: 20 }}
                  value={sourcedataId}
                  onChange={selSourcedata}
                  placeholder="请选择数据源"
                >
                  {sourcedata.map(item => {
                    return (
                      <Option key={item.id} value={item.id}>
                        {item.name}
                      </Option>
                    );
                  })}
                </Select>
              </>
            ) : (
              <div className="g-noData">暂无数据源！</div>
            )}
          </div>
          {sourcedataId ? (
            <Spin spinning={loading}>
              <div className={styles.weekBox}>
                <Row justify="start">
                  <Col span={4} className={styles.spans}>
                    星期
                  </Col>
                  <Col span={2} className={styles.on}>
                    一
                  </Col>
                  <Col span={2} className={styles.spans}>
                    二
                  </Col>
                  <Col span={2} className={styles.spans}>
                    三
                  </Col>
                  <Col span={2} className={styles.spans}>
                    四
                  </Col>
                  <Col span={2} className={styles.spans}>
                    五
                  </Col>
                  <Col span={2} className={styles.spans}>
                    六
                  </Col>
                  <Col span={2} className={styles.spans}>
                    日
                  </Col>
                </Row>
              </div>

              <div className={styles.taskBox}>
                <div className={styles.title}>映射表</div>
                <Row justify="center">
                  <Col span={1}>0</Col>
                  <Col span={1}>1</Col>
                  <Col span={1}>2</Col>
                  <Col span={1}>3</Col>
                  <Col span={1}>4</Col>
                  <Col span={1}>5</Col>
                  <Col span={1}>6</Col>
                  <Col span={1}>7</Col>
                  <Col span={1}>8</Col>
                  <Col span={1}>9</Col>
                  <Col span={1}>10</Col>
                  <Col span={1}>11</Col>
                  <Col span={1}>12</Col>
                  <Col span={1}>13</Col>
                  <Col span={1}>14</Col>
                  <Col span={1}>15</Col>
                  <Col span={1}>16</Col>
                  <Col span={1}>17</Col>
                  <Col span={1}>18</Col>
                  <Col span={1}>19</Col>
                  <Col span={1}>20</Col>
                  <Col span={1}>21</Col>
                  <Col span={1}>22</Col>
                  <Col span={1}>23</Col>
                </Row>
              </div>

              {listData.map(item => {
                return (
                  <div className={styles.taskBox} key={item.id}>
                    <div className={styles.title}>{item.table_name}</div>
                    <Row justify="center">
                      <Col span={1}>0</Col>
                      <Col span={11}>1</Col>
                      <Col span={1}>2</Col>
                      <Col span={1}>3</Col>
                      <Col span={1}>4</Col>
                      <Col span={1}>5</Col>
                      <Col span={1}>6</Col>
                      <Col span={1}>7</Col>
                    </Row>
                  </div>
                );
              })}
            </Spin>
          ) : (
            ''
          )}
        </div>
      </div>
    </PageContainer>
  );
};

export default TableList;
